<template>

  <lay-tab :type="tabType" v-model="current7" :tabPosition="tabPosition" @change="change5(current7)">

    <lay-tab-item v-for="(item,index) in labelList" :id="item.id">
      <!--      :title="item.name"-->
      <template #title>
        <div style="padding:5px">{{ item.name }}
          <lay-icon type="layui-icon-circle-dot" style="margin-left:8px" :color="item.color"></lay-icon>
        </div>
      </template>


      <div style="padding:20px">
        <lay-table
            :resize="true"
            :columns="columns8"
            :data-source="dataSource8"
            :default-toolbar="true"
            even>

          <template #toolbar>
            <lay-button type="primary" size="sm" @click="">批量分配</lay-button>
          </template>

          <template #status="{ row }">
            <span style="color:#FF5722">{{ row.status }}</span>

          </template>

          <template v-slot:operator="{ row }">
            <lay-button size="xs" type="primary">分配</lay-button>
          </template>

        </lay-table>

      </div>

    </lay-tab-item>

  </lay-tab>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import {layer} from '@layui/layui-vue'
import {getPage} from "@/api/business/label";
import {getHostelApplyPage} from "@/api/business/hostelApply";

onMounted(() => {
  //左侧的标签集合
  getLabelList();

  //右侧数据
  getApplyList();

})

const labelList = ref();
//查询左侧列表
const getLabelList = () => {
  let searchQuery = {index: 1, size: 999}
  getPage(searchQuery).then(res => {
    if (res.code == 0 && res.data.records.length > 0) {
      labelList.value = res.data.records;
    }
  })
}

const searchQuery = reactive({
  labelId:0,
  status:'待分配'
})

//右侧数据
const getApplyList = () =>{
  searchQuery.labelId = current7.value
  getHostelApplyPage(searchQuery).then(res=>{
      if (res.code == 0 && res.data.records.length > 0){
        dataSource8.value = res.data.records;
      }else{
        dataSource8.value = [];
      }
  })
}

const change5 = function(id: number){
  current7.value = id;
  getApplyList();
}

const current7 = ref(1);
const tabPosition = ref("left");
const tabType = ref("brief");


const columns8 = [
  { fixed: "left", type: "checkbox", title: "复选"},
  {
    title: "编号",
    width: "80px",
    key: "id"
  },
  {
    title: "学生姓名",
    width: "80px",
    key: "studentName"
  }, {
    title: "所属学院",
    width: "80px",
    key: "collegeName"
  },
  {
    title: "所属班级",
    width: "80px",
    key: "className"
  },
  {
    title: "审批状态",
    width: "80px",
    key: "status",
    customSlot: "status"
  },
  { title:"操作", width: "150px", customSlot:"operator", key:"operator", fixed: "right", ignoreExport: true }
]

const dataSource8 = ref();
</script>

<style scoped>

</style>